<template>
  <div class="search">
    <div>
      <span>签名：</span>
      <el-input v-model="searchValue.phoneNumber" placeholder="请输入签名" />
    </div>
    <div>
      <span>状态：</span>
      <el-select
        v-model="searchValue.messageType"
        class="m-2"
        placeholder="请选择"
      >
        <el-option
          v-for="item in messageType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <el-button type="primary" :icon="Search">Search</el-button>
    <el-button type="primary" :icon="Plus">创建短信签名</el-button>
  </div>
  <div class="table">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column prop="phone" label="手机号码" width="180" />
      <el-table-column prop="templateName" label="短信模板" />
      <el-table-column prop="typeName" label="类型" />
      <el-table-column prop="sendTypeName" label="发送类型" />
      <el-table-column prop="mession" label="外呼任务" />
      <el-table-column prop="note" label="备注" />
      <el-table-column prop="count" label="短信条数" />
      <el-table-column prop="status" label="状态" />
      <el-table-column prop="createTime" label="添加时间" />
      <el-table-column prop="sendTime" label="预定发送时间" />
    </el-table>
    <el-pagination
      layout="sizes, prev, pager, next"
      v-model:page-size="pageSize"
      :page-sizes="[100, 200, 300, 400]"
      :total="5"
      style="justify-content: flex-end;"
    ></el-pagination>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { Plus, Search } from '@element-plus/icons-vue';
const searchValue = reactive({
  phoneNumber: '',
  phoneNumberMD5: '',
  messageType: '',
});
const messageType = [
  {
    label: '普通挂机短信',
    value: '普通挂机短信',
  },
  {
    label: '交互挂机短信',
    value: '交互挂机短信',
  },
];
const tableData = reactive([
  {
    id: 2,
    phone: '2323',
    templateName: '模板1',
    sendTypeName: null,
    mession: 12,
    createTime: '2023-04-17 18:00:40',
    note: '12',
    status: '待提交',
    sendTime: '2023-04-03 00:00:00',
    typeName: '首发',
    count: null,
    submitTime: null,
    parseTime: null,
  },
]);
const pageSize = ref(100);
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 5px;
  padding-top: 25px;
  padding-bottom: 30px;
  background-color: white;
  & > div {
    display: flex;
    align-items: center;
    & > span {
      white-space: nowrap;
    }
  }
}
.table {
  margin-top: 10px;
}
</style>
